<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <title>云联数据</title>
    <!-- 引入css reset -->
    <link rel="stylesheet" href="css/reset.css">
    <!-- 引入当前页面样式 -->
    <link rel="stylesheet" href="css/index.css">
</head>

<body>

    <!-- 定义网页头部内容 -->
    <header>
        <nav>
            <div class="navLeft">
                <img src="images/5e5f1e86391b7.png" alt="">
                <div class="catalog" id="catalog">
                    <div class="move">
                        <p class="after active">最新公告</p>
                    <div></div>
                    </div>
                   <div class="move">
                    <p class="after">产品中心</p>
                    <div class="productList">
                        <div class="productContainer">
                            <dl>
                                <dt>计算资源服务</dt>
                                <dd class="hot">
                                    <a href=""><span>ECS弹性计算</span></a>
                                    <a href=""><span>弹性裸金属服务器</span></a>
                                </dd>
                            </dl>
                            <dl>
                                <dt>网络接入服务</dt>
                                <dd class="hot1">
                                    <a href=""><span>专线接入服务</span></a>
                                    <a href=""><span>高速通道服务</span></a>
                                    <a href=""><span>带宽接入服务</span></a>
                                </dd>
                            </dl>
                            <dl>
                                <dt>数据中心服务</dt>
                                <dd>
                                    <a href=""><span>机房场地服务</span></a>
                                    <a href=""><span>运维咨询服务</span></a>
                                </dd>
                            </dl>
                            <dl>
                                <dt>咨询管理服务</dt>
                                <dd>
                                    <a href=""><span>机房搬迁咨询</span></a>
                                    <a href=""><span>BCM管理咨询</span></a>
                                    <a href=""><span>IT生产规划咨询</span></a>
                                </dd>
                            </dl>
                        </div>
                    </div>
                   </div>
                    <div class="move">
                        <p class="after">解决方案</p>
                    <div class="solution">
                        <div>
                            <a href="">混合云解决方案</a>
                            <a href="">IT咨询解决方案</a>
                            <a href="">IT运维解决方案</a>
                            <a href="">机房场地解决方案</a>
                            <a href="">机房搬迁解决方案</a>
                        </div>
                    </div>
                    </div>
                   <div class="move">
                    <p class="after">服务保障</p>
                    <div class="service">
                        <div>
                            <a href="">免费备案</a>
                            <a href="">故障赔偿</a>
                            <a href="">服务支持</a>
                            <a href="">VIP服务</a>
                        </div>
                    </div>
                   </div>
                    <div class="move">
                        <p class="after">帮助中心</p>
                    <div></div>
                    </div>
                    <div class="move">
                        <p class="after">关于我们</p>
                    <div class="aboutUs">
                        <div>
                            <a href="">关于我们</a>
                            <a href="">新闻公告</a>
                            <a href="">联系我们</a>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
            <div class="navRight">
                <div id="address" class="addr">
                    <div class="address" >中国站
                        <span class="list"></span>
                    </div>
                    <div class="address1">
                        <div>
                            <a href="">中国站</a>
                            <a href="">简体中文</a>
                        </div>
                    </div>
                </div>
                <a class="baBtn">备案</a>
                <a class="dlBtn">登录</a>
            </div>
        </nav>
        <div class="main">
            <div>
                <h2>云联数据</h2>
                <p>为驱动中国的新兴云计算技术提供坚实的服务平台</p>
                <span>最新公告</span>
            </div>
        </div>
        <div class="mainDiv">
            <span></span>
        </div>
        <div class="more">
            <a href="">更多></a>
        </div>
        </div>
    </header>
    <!-- 定义网页服务区域 -->
    <div class="allServe">
        <div class="serve">
            <div class="option">
                <div class="calculateServe"><span></span>
                    <h3>计算资源</h3>
                    <p>安全、稳定、低成本的计算资源</p>
                </div>
                <div class="internetServe"><span></span>
                    <h3>网络接入</h3>
                    <p>企业总部、数据中心、分支机构间专线互联接入服务</p>
                </div>
                <div class="dataServe"><span></span>
                    <h3>数据中心</h3>
                    <p>高度安全、可靠和容错的数据中心环境</p>
                </div>
                <div class="consultServe"><span></span>
                    <h3>咨询服务</h3>
                    <p>专业的金融行业容灾咨询管理团队</p>
                </div>
            </div>
            <div class="introServe">
                <div class="serveDetails">云联数据为您提供<span>高速、稳定、安全、弹性</span>的数据产品 <p>计算、存储、网络、监控、安全，完善的数据产品满足您的一切所需</p>
                </div>
                <div class="calculateServe1">
                    <div><span></span>
                        <p>计算资源服务</p>
                    </div>
                    <button class="calBtn">
                        <div>ESC弹性计算 <img src="images/hot.png" alt=""><br>
                            <p id="calP">极速稳定高弹性的计算服务</p>
                        </div>
                    </button>
                    <button class="serBtn">
                        <div>弹性裸金属服务器</div>
                        <p>高性能安全隔离物理集群服务</p>
                    </button>
                    <button class="cloudBtn">
                        <div>云数据库MySQL</div>
                        <p>稳定可靠、可弹性伸缩的数据方案</p>
                    </button>
                    <button class="sqlBtn">
                        <div>云数据库 SQL Server</div>
                        <p>安全运行、轻松管理的数据方案</p>
                    </button>
                    <button class="objBtn">
                        <div>对象存储</div>
                        <p>高可用、易用、低成本、一站式</p>
                    </button>
                </div>
                <div class="otherServe">
                    <div class="internetServe1">
                        <div class="internetServe11">
                            <span></span>
                            <p>网络接入服务</p>
                        </div>
                        <div class="internetServe111">
                            <div>DCHI <p>数据中心高速通道</p>
                            </div>
                            <div>CPN <p>公有云高速通道</p>
                            </div>
                            <div>VPN <p>专线互联接入服务</p>
                            </div>
                            <div>BGP <p>多运营商互联网接入</p>
                            </div>
                        </div>
                    </div>
                    <div class="anotherServe">
                        <div class="dataServe1">
                            <div class="dataServe11">
                                <span></span>
                                <p>数据中心服务</p>
                            </div>
                            <div class="dataServe111">
                                <div>机房场地服务 <p>高度安全、可靠和容错的环境</p>
                                </div>
                                <div>运维咨询服务 <p>完善的安全性、标准化、平台化</p>
                                </div>
                            </div>
                        </div>
                        <div class="consultServe1">
                            <div class="consultServe11">
                                <span></span>
                                <p>咨询管理服务</p>
                            </div>
                            <div class="consultServe111">
                                <div>BCM管理咨询 <p>业务连续性管理</p>
                                </div>
                                <div>IT生产规划咨询 <p>IT生产规划</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="safetyServe">
                <div class="safety">提供<span>安全合规</span>的服务<p>权威认证的产品服务，充分保障您的业务实践与业务安全</p>
                </div>
                <div class="cooperation">
                    <div class="cooperation1">
                        <div><img src="images/hor-img11.png" alt=""><br><span>IDC/云计算资质</span></div>
                        <div><img src="images/hor-img2.png" alt=""><br><span>CNNIC</span></div>
                        <div><img src="images/hor-img12.png" alt=""><br><span>ISO认证</span></div>
                        <div><img src="images/hor-img5.png" alt=""><br><span>中国联通</span></div>
                        <div><img src="images/hor-img3.png" alt=""><br><span>中国电信</span></div>
                        <div><img src="images/hor-img4.png" alt=""><br><span>软件著作权</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 定义网页广告区域 -->
    <div class="ad">
        <ul id="ad">
            <li class="firstReason reason newAd">
                <div class="icon">
                为什么选择云联数据
            </div>
            <div class="content">
                <img src="images/av-img1.png" alt="">
                <div class="freeContent">
                    <h1>免费备案</h1>
                    <p>为用户提供免费备案服务，最专业的备案——1V1备案处理机制</p>
                    <button>查看详情</button>
                </div>
                </div>
            </li>
            <li class="secondReason reason">
                <div class="icon1">
                为什么选择云联数据
            </div>
            <div class="content1">
                <img src="images/av-img2.png" alt="">
                <div class="payContent">
                    <h1>故障赔偿</h1>
                    <p>云联数据承诺由于云联数据故障导致产品无法正常使用，我们将提供故障赔偿时间让您使用舒心</p>
                    <button>查看详情</button>
                </div>
                </div>
            </li>
            <li class="thirdReason reason">
                <div class="icon2">
                为什么选择云联数据
            </div>
            <div class="content2">
                <img src="images/av-img3.png" alt="">
                <div class="supportContent">
                    <h1>服务支持</h1>
                    <p>专业的售后工程师团队为您提供 7*24*365 技术服务</p>
                    <button>查看详情</button>
                </div>
                </div>
            </li>
            <li class="fourthReason reason">
                <div class="icon3">
                为什么选择云联数据
            </div>
            <div class="content3">
                <img src="images/av-img4.png" alt="">
                <div class="vipContent">
                    <h1>VIP服务</h1>
                    <p>为了进一步提供更细致、更专业的服务，云联数据针对VIP客户，我司将通过建立微信群/QQ讨论组/电话等形式为您安排多人的技术团队为您提供售前售后的服务</p>
                    <button>查看详情</button>
                </div>
                </div>
            </li>

        </ul>
        <div class="secondDiv">
            <span class="activeSpan childSpan"></span>
            <span class="childSpan"></span>
            <span class="childSpan"></span>
            <span class="childSpan"></span>
        </div>
    </div>
    <!-- 定义网页地图区域 -->
    <div class="worldMap">
        <div class="aboutMap">您的业务可以<span>遍布</span>世界各地<p>网络拉近了人类的距离，云计算推动了文明的新高度</p>
            <div class="worldMap1">
                <div class="mapContent">
                    <div class="regionList postition1">
                        <div class="areaBox"><span class="dot1"></span><span class="pulse1"></span></div>
                    </div>
                    <div class="regionList postition2">
                        <div class="areaBox"><span class="dot1"></span><span class="pulse1"></span></div>
                    </div>
                    <div class="regionList postition3">
                        <div class="areaBox"><span class="dot1"></span><span class="pulse1"></span></div>
                    </div>
                    <div class="regionList postition4">
                        <div class="areaBox"><span class="dot1"></span><span class="pulse1"></span></div>
                    </div>
                    <div class="regionList postition5">
                        <div class="areaBox"><span class="dot2"></span><span class="pulse2"></span></div>
                    </div>
                    <div class="regionList postition6">
                        <div class="areaBox"><span class="dot2"></span><span class="pulse2"></span></div>
                    </div>
                    <div class="regionList postition7">
                        <div class="areaBox"><span class="dot2"></span><span class="pulse2"></span></div>
                    </div>
                    <div class="regionList postition8">
                        <div class="areaBox"><span class="dot2"></span><span class="pulse2"></span></div>
                    </div>
                    <div class="area1 status">华北</div>
                    <div class="area2 status">华东</div>
                    <div class="area3 status">华南</div>
                    <div class="area4 status">香港</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 定义方案区域 -->
    <div class="project">
        <div class="projectTitle">
            <div class="projectTitle1">云联数据<span>综合</span>解决方案<p>根据行业特性、企业现状，为您提供高可用、安全的解决方案</p>
            </div>
            <div class="allProject">
                <div class="auto" id="auto">
                    <a href="#carousel-example-generic" class="btnLeft" id="btnLeft">
                        <i class="btnLeft1"></i>
                    </a>
                    <a href="#carousel-example-generic" class="btnRight" id="btnRight">
                        <i class="btnRight1"></i>
                    </a>
                    <div class="solutionList">
                        <ul id="solutionList">
                            <li class="mixSolutionBg carouselImg">
                                <div class="liBgcolor opa1"></div>
                                <i class="mixIcon"></i>
                                <p class="solutionTitle">混合云解决方案</p>
                                <p class="solutionIntro">混合云解决方案</p>
                                <a href="" target="_blank">查看详情</a>
                            </li>
                            <li class="solutionBg carouselImg">
                                <div class="liBgcolor opa1"></div>
                                <i class="gameIcon"></i>
                                <p class="solutionTitle">机房搬迁解决方案</p>
                                <p class="solutionIntro">机房搬迁解决方案</p>
                                <a href="" target="_blank">查看详情</a>
                            </li>
                            <li class="consultSolutionBg carouselImg">
                                <div class="liBgcolor opa1"></div>
                                <i class="consultIcon"></i>
                                <p class="solutionTitle">IT咨询解决方案</p>
                                <p class="solutionIntro">IT咨询解决方案</p>
                                <a href="" target="_blank">查看详情</a>
                            </li>
                            <li class="opeSolutionBg carouselImg">
                                <div class="liBgcolor opa1"></div>
                                <i class="opeIcon"></i>
                                <p class="solutionTitle">IT运维解决方案</p>
                                <p class="solutionIntro">IT运维解决方案</p>
                                <a href="" target="_blank">查看详情</a>
                            </li>
                            <li class="airSolutionBg carouselImg">
                                <div class="liBgcolor opa1"></div>
                                <i class="airIcon"></i>
                                <p class="solutionTitle">IT运维解决方案</p>
                                <p class="solutionIntro">IT运维解决方案</p>
                                <a href="" target="_blank">查看详情</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 定义网页新闻区域 -->
    <div class="news">
        <div class="newTitle">
            <div class="newTitle1">云联数据<span>新闻</span>动态<p>为您提供最新行业资讯、活动公告、产品发布，汇聚最前沿最流行的云计算技术</p>
            </div>
        </div>
    </div>
    <!-- 联系我们 -->
    <div class="connection">
        <div class="container">
            <div class="container1">联系我们，立即开启您的服务之旅！<br><a href="" class="containerA">立即联系</a></div>
        </div>
    </div>
    <!-- 定义网页底部内容 -->
    <footer>
        <div class="footerCatalog">
            <div class="footContainer">
                <ul>
                    <li>
                        <h4>产品介绍</h4>
                        <a href="">计算资源服务</a>
                        <a href="">网络接入服务</a>
                        <a href="">数据中心服务</a>
                        <a href="">咨询管理服务</a>
                    </li>
                    <li>
                        <h4>解决方案</h4>
                        <a href="">混合云解决方案</a>
                        <a href="">IT咨询解决方案</a>
                        <a href="">IT运维解决方案</a>
                        <a href="">机房场地解决方案</a>
                        <a href="">机房搬迁解决方案</a>
                    </li>
                    <li>
                        <h4>帮助与支持</h4>
                        <a href="">产品文档</a>
                        <a href="">Whois查询</a>
                        <a href="">控制面板</a>
                        <a href="">备案服务</a>
                        <a href="">工单服务</a>
                    </li>
                    <li>
                        <h4>其他链接</h4>
                        <a href="">公司简介</a>
                        <a href="">联系我们</a>
                        <a href="">新闻公告</a>
                        <a href="">友情链接</a>
                        <a href="">服务协议</a>
                    </li>
                    <li>
                        <h4>联系我们</h4>
                        <div>联系电话：<span> 010-64868382</span></div>
                        <div>电子邮箱：<span>marketing@cuds.com.cn</span></div>
                        <div>商务洽谈：<span> 010-64868382</span></div>
                        <ul class="ul1">
                        <li class="weixin"><a href=""></a>
                            <p>
                                <i></i>
                                <img src="images/5e5df2ab2f875.jpg" alt="">
                            </p>
                    </li>
                    <li class="qq"><a href=""></a></li>
                    <li class="e-mail"><a href=""></a></li>
                </ul>
                </li>
                </ul>
            </div>
        </div>
        <div class="copyright">
            <p>COPYRIGHT 2017-2020 云联世纪（北京）数据服务有限公司 ALL RIGHTS RESERVED</p>
            <a href="">京ICP备15057281号</a>
            <a href="">京公网安备 11010502040656号</a>
        </div>
    </footer>
    <!-- 右侧咨询 -->
    <div class="rightConsult">
        <ul class="allConsult">
            <li class="qq">
                <div> <img src="images/qq.png" alt=""><p>QQ咨询</p></div>
                <div class="qqConsult">
                    <p>请选择客服进行咨询</p>
                    <img src="images/icon_suspension_consult.png" alt="">
                    <div><i></i></div>
                </div>
            </li>
            <li class="weixin1">
                <div> <img src="images/wechat.png" alt=""><p>微信咨询</p></div>
                <div class="weixinConsult">
                    <img src="images/5e5df2ab2f875.jpg" alt="">
                    <div><i></i></div>
                </div>
            </li>
            <li class="tel">
                <div> <img src="images/tel.png" alt=""><p>电话咨询</p></div>
                <div class="telConsult">
                    <p>请选择客服进行咨询</p>
                    <img src="images/icon_suspension_tel_orange.png" alt=""><span>010-64868382</span>
                    <div><i></i></div>
                </div>
            </li>
            <li><a href="">备案</a></li>
            <li><a href="">工单</a></li>
            <li id="ScrollUp"><a>TOP</a></li>
        </ul>

    </div>


    </div>
    <script src="cuds/jsex.js"></script>
    <script src="js/jquery.min.js"></script>
    <script>
        $("#auto").mousemove(function(){
            $("#btnLeft").fadeIn("slow");
            $("#btnRight").fadeIn("slow");
        })
        $("#auto").mouseleave(function(){
            $("#btnLeft").fadeOut("slow");
            $("#btnRight").fadeOut("slow");
        })

        
                var _index5=0;
            $("#btnRight").click(function(){
            _index5++;
            var len=$("#solutionList li").length;
            if(_index5+5>len){
                $("#solutionList").stop().append($("#solutionList").html());
            }
            $("#solutionList").stop().animate({left:-_index5*300},1000);
            });

            
             $("#btnLeft").click(function(){
            if(_index5==0){
                $("#solutionList").prepend($("#solutionList").html());
                $("#solutionList").css("left","-1380px");
                _index5=6
            }
            _index5--;
            $("#solutionList").stop().animate({left:-_index5*300},1000);
            });

    </script>

</body>

</html>